/**
 * Created by liuqingxia on 2016/3/30.
 */

$(function () {
    drawLineChart("serverLoad1");
    drawLineChart("serverLoad2");
    drawLineChart("serverLoad3");
    drawLineChart("serverLoad4");
});


var data = [], totalPoints = 300;
function getRandomData() {
    if (data.length > 0)
        data = data.slice(1);

    // do a random walk
    while (data.length < totalPoints) {
        var prev = data.length > 0 ? data[data.length - 1] : 50;
        var y = prev + Math.random() * 10 - 5;
        if (y < 0)
            y = 0;
        if (y > 100)
            y = 100;
        data.push(y);
    }

    // zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < data.length; ++i)
        res.push([i, data[i]])
    return res;
}

function drawLineChart(eleId) {
    if ($("#" + eleId).length) {
        var options = {
            series: {
                shadowSize: 1
            },
            lines: {
                show: true,
                lineWidth: 3,
                fill: true,
                fillColor: {
                    colors: [
                        {opacity: 0.9},
                        {opacity: 0.9}
                    ]
                }
            },
            yaxis: {min: 0, max: 100,tickFormatter: function (v) { return v + "M"; }},
            colors: ["#2B99E6"],
            grid: {
                tickColor: "#f9f9f9",
                borderWidth: 0
            }
        };
        var plot = $.plot($("#" + eleId), [getRandomData()], options);

        function update() {
            plot.setData([getRandomData()]);

            plot.draw();

            setTimeout(update, 1000);
        }

        update();
    }

}

